<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>考试管理-统一安排-参数配置</title>
    <link rel="stylesheet" th:href="@{/lib/layui-v2.6.3/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/layuimini.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/themes/default.css}" media="all">
    <link rel="stylesheet" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
    <style type="text/css">
        .div-content{
            background-color: white;
            border-radius: 5px;
            padding: 14px;
        }
        .table-search-fieldset{
            margin: 0;
            border: 1px solid #e6e6e6;
            padding: 10px 20px 5px 20px;
            color: #6b6b6b;
        }
        #left{
            border-right: 1px solid red;
            width: 580px;
        }
        .layui-form-item{
            margin-bottom: 0;
        }
        #right{
            width: 450px;
            display: flex;
            border-right: 1px solid red;
        }
        .layui-input-block{
            margin-left: 0;
        }
        #right-2{
            /*border: 1px solid red;*/
            width: 120px;
            height: 100px;
            margin-left: 20px;
            margin-top: 12px;
        }
        .mydiv{
            display: flex;
            height: 40px;
            width:100%;
            /*border: 1px solid orange;*/
            margin-bottom: 8px;
            /*text-align: center;*/
        }
    </style>
</head>
<body>
<div class="div-content">
    <form class="layui-form " action="" id="form-search">
        <fieldset class="table-search-fieldset" style="border: 1px solid black">
            <legend>考试相关参数配置</legend>
            <div class="layui-form-item" style="display: flex">
                <!--左边考试日期、课程、 其起始和截止、时长、间隔得到的设置-->
                <div class="layui-inline" id="left">
                    <div class="layui-inline">
                        <label class="layui-form-label">考试日期：</label>
                        <div class="layui-input-inline" style="width: 130px;">
                            <input type="text" lay-verify="required" name="examData" class="layui-input" id="examData" placeholder="yyyy-MM-dd">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">考试课程：</label>
                        <div class="layui-input-inline" style="width: 130px;">
<!--                            <input type="text" name="course" autocomplete="off" class="layui-input">-->
                            <select id="course" name="course" lay-verify="required">
                                <option value="">请选择</option>
<!--                                <option value="1">花津校区</option>-->
<!--                                <option value="2">赭山校区</option>-->
<!--                                <option value="3">天门山校区</option>-->
                            </select>
                        </div>
                    </div>
                    <br>
                    <div class="layui-inline">
                        <label class="layui-form-label">考试起始：</label>
                        <div class="layui-input-inline" style="width: 130px;">
                            <input type="text" lay-verify="required" name="starttime" class="layui-input" id="starttime" placeholder="HH:mm:ss">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">考试截止：</label>
                        <div class="layui-input-inline" style="width: 130px;">
                            <input type="text" lay-verify="required" name="endtime" class="layui-input" id="endtime" placeholder="HH:mm:ss">
                        </div>
                    </div>
                    <br>
                    <div class="layui-inline">
                        <label class="layui-form-label" >考试时长(min)：</label>
                        <div class="layui-input-inline" style="width: 130px;">
                            <input type="text" lay-verify="required" name="duration" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label" >考试间隔(min)：</label>
                        <div class="layui-input-inline" style="width: 130px;">
                            <input type="text" lay-verify="required" name="interval" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <!--中间考试机房的设置-->
                <div class="layui-inline" id="right">
                    <div class="layui-form-item">
                        <label class="layui-form-label">考试机房：</label>
                        <br>
                        <div class="layui-input-block">
                            <input type="hidden" name="roomNum" id="doorNum" class="layui-input" value="0"/>
                        </div>
                    </div>
                    <div style="height: 90px" id="test12" class="demo-tree-more"></div>
                </div>
                <!--右边开始安排和清空条件按钮设置-->
                <div class="layui-inline" id="right-2">
                    <button style="margin-bottom: 15px;margin-top: 15px" id="btn-search" lay-submit lay-filter="btn-search-filter" type="button" class="layui-btn layui-btn-radius layui-btn-sm">
                        <i class="layui-icon layui-icon-set-sm"></i>
                        开始安排
                    </button>
                    <br>
                    <button id="btn-reset" type="reset" class="layui-btn layui-btn-radius layui-btn-sm">
                        <i class="layui-icon layui-icon-fonts-clear"></i>
                        清空条件
                    </button>
                </div>
            </div>
        </fieldset>
    </form>
</div>

<div style="padding-left: 14px">
    <span style="color: red">下面显示的是这门课安排的简要信息！</span>
<!--    <button type="button" id="btns" class="layui-btn layui-btn-normal layui-btn-radius layui-btn-sm">-->
<!--&lt;!&ndash;        <i class="layui-icon layui-icon-set-sm"></i>&ndash;&gt;-->
<!--        点击查看详情-->
<!--    </button>-->
    <span>前往<span style="color: red">考场分布</span>查看详情！</span>
</div>

<div class="div-content">
    <fieldset class="table-search-fieldset" style="border: 1px solid black" >
        <legend>考试安排统计</legend>
        <div class="mydiv">
            <div style="width:17%"></div>
            <div style="width:83%;text-align: center">
                <div style="display: flex">
                    <div style="width:20%">总共</div>
                    <div style="width:20%">花津校区</div>
                    <div style="width:20%">赭山校区</div>
                    <div style="width:20%">天门山校区</div>
                    <div style="width:20%">日期</div>
                </div>
            </div>
        </div>
        <div style="display: flex;width: 100%;height: 40px;margin-bottom: 8px">
            <div style="width:17%">考生人数</div>
            <div id="stuallshow" style="width:83%;text-align: center">
            </div>
        </div>
        <div class="mydiv">
            <div style="width:17%">考场数</div>
            <div style="width:83%;text-align: center">
                <div style="display: flex">
                    <div style="width:20%" th:text="${totalRoom}"></div>
                    <div style="width:20%" th:each="room:${countRoom}" th:text="${room}"></div>
                </div>
            </div>
        </div>
        <div style="display: flex;width: 100%;margin-bottom: 8px">
            <div style="width:17%">已排考场</div>
            <div id="roomshow" style="width:83%;text-align: center">
            </div>
        </div>
        <div style="display: flex;width: 100%;margin-bottom: 8px">
            <div style="width:17%">可参加考试人数</div>
            <div id="stushow" style="width:83%;text-align: center">
            </div>
        </div>
        <div class="mydiv">
            <div style="width:17%">参加考试总人数</div>
            <div id="allshow" style="width:83%;text-align: center">
            </div>
        </div>
    </fieldset>
</div>

<script th:src="@{/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
<script th:src="@{/js/jquery-3.6.0.min.js}" charset="utf-8"></script>
<script th:inline="javascript">
    var room=[[${room}]];
    var room1=[],room2=[],room3=[];
    for(var i=0;i<room.length;i++){
        let a={title:room[i].roomAddr,id:room[i].roomId};
        if(room[i].campus===1) room1.push(a)
        if(room[i].campus===2) room2.push(a)
        if(room[i].campus===3) room3.push(a)
    }
    var x1={
        "title":"花津校区",
        "id":"1",
        "children":room1
    }
    var x2={
        "title":"赭山校区",
        "id":"2",
        "children":room2
    }
    var x3={
        "title":"天门山校区",
        "id":"3",
        "children":room3
    }
    let allroom=[x1,x2,x3]
</script>
<script th:inline="javascript">
    layui.use(['laydate','layer','form','tree', 'util'],function () {
        var laydate = layui.laydate;
        var form=layui.form;
        var layer=layui.layer;
        var $=layui.$;
        var tree = layui.tree;
        var util = layui.util;

        tree.render({
            elem:"#test12",
            id:"demoId1",
            data: allroom,
            showCheckbox: true
        });

        var course=[[${cname}]]
        for(let i=0;i<course.length;i++){
            $("#course").append(
                '<option value="'+course[i]+'">'+course[i]+'</option>'
            )
        }
        form.render();

        //点击按钮开始分配将参数传递到后端
        form.on('submit(btn-search-filter)', function(data){
            var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据
            var arr=[];
            for(let i=0;i<checkedData.length;i++){
                info=checkedData[i].children;
                for(let j=0;j<info.length;j++){
                    title=info[j].title;
                    arr.push(title)
                }
            }
            let arr2=arr.join(",")
            data.field.roomNum=arr2;
            document.getElementById("doorNum").value=arr2;

            $.ajax({
                url:"/exam/arrange",
                data:data.field,
                success:function (res) {
                    if(res.state==200){
                        layer.msg('分配成功！',{
                            icon: 1,
                            time:1000
                        },function () {
                            console.log(data.field.course)
                            $.ajax({
                                url:"/exam/unifiedArrage2",
                                data:{"course":data.field.course},
                                success:function (res) {
                                    console.log(res);
                                    console.log(typeof(res.data.i[0]));
                                    $('#stuallshow').empty();
                                    $('#roomshow').empty();
                                    $('#stushow').empty();
                                    $('#allshow').empty();
                                    let huas=0,zhes=0,tians=0,totals=0;
                                    let x=Number(res.data.i[0])+Number(res.data.i[1])+Number(res.data.i[2]);
                                    console.log(x)
                                    for(let i=0;i<res.data.s1.length;i++){
                                        $('#roomshow').append(
                                            '<div style="display: flex">' +
                                            '<div style="width: 20%">'+res.data.s1[i].total+'</div>' +
                                            '<div style="width: 20%">'+res.data.s1[i].hua+'</div>' +
                                            '<div style="width: 20%">'+res.data.s1[i].zhe+'</div>' +
                                            '<div style="width: 20%">'+res.data.s1[i].tian+'</div>' +
                                            '<div style="width: 20%">'+res.data.s1[i].times+'</div>' +
                                            '</div><br>'
                                        )
                                        $('#stushow').append(
                                            '<div style="display: flex">' +
                                            '<div style="width: 20%">'+res.data.s2[i].total+'</div>' +
                                            '<div style="width: 20%">'+res.data.s2[i].hua+'</div>' +
                                            '<div style="width: 20%">'+res.data.s2[i].zhe+'</div>' +
                                            '<div style="width: 20%">'+res.data.s2[i].tian+'</div>' +
                                            '<div style="width: 20%">'+res.data.s2[i].times+'</div>' +
                                            '</div><br>'
                                        )
                                        huas+=res.data.s2[i].hua;
                                        zhes+=res.data.s2[i].zhe;
                                        tians+=res.data.s2[i].tian;
                                        totals+=res.data.s2[i].total;
                                    }
                                    $('#allshow').append(
                                        '<div style="display: flex">' +
                                        '<div style="width: 20%">'+totals+'</div>' +
                                        '<div style="width: 20%">'+huas+'</div>' +
                                        '<div style="width: 20%">'+zhes+'</div>' +
                                        '<div style="width: 20%">'+tians+'</div>' +
                                        '</div>'
                                    )
                                    $('#stuallshow').append(
                                        '<div style="display: flex">' +
                                        '<div style="width: 20%">'+x+'</div>' +
                                        '<div style="width: 20%">'+res.data.i[0]+'</div>' +
                                        '<div style="width: 20%">'+res.data.i[1]+'</div>' +
                                        '<div style="width: 20%">'+res.data.i[2]+'</div>' +
                                        '</div>'
                                    )
                                }
                            });
                            // setTimeout('window.location.reload()',500);
                        });
                    }else {
                        console.log(res.data)
                        let str=""
                        for(let a=0;a<res.data.length;a++){
                            str=str+'”'+res.data[a]+'“，';
                        }
                        str=str.slice(0,str.length-1);
                        console.log(str)
                        layer.open({
                            title:[res.message,"color:red"],
                            content:"<h3>{"+str+"}已经分配，请选择其他机房吧！</h3>",
                            area: '500px',
                        });
                    }
                }
            });
        });

        //时间选择器
        laydate.render({
            elem:'#examData'
        });
        laydate.render({
            elem: '#starttime',
            type:'time'
        });
        laydate.render({
            elem: '#endtime',
            type:'time'
        });

        // $("#btns").click(function () {
        //     $("#clicks").click();
        // })
    });


</script>
</body>
</html>